@import '../../style/themes';
@import '../../style/mixins';

$table-prefix: x-table;

.#{$table-prefix} {
  @include reset-component();

  display: flex;
  flex-direction: column;
  background: $table-bg;

  &-bordered {
    .#{$table-prefix}_header {
      margin-bottom: -17px - $table-border-width;
    }

    .#{$table-prefix}_header,
    .#{$table-prefix}_body {
      border: $table-border;
    }

    .#{$table-prefix}_td,
    .#{$table-prefix}_th {
      border-right: $table-border;

      &:last-child {
        border-right: 0;
      }
    }
  }

  &-bottom-bordered {
    .#{$table-prefix}_td,
    .#{$table-prefix}_th {
      border-bottom: $table-border;
    }

    .#{$table-prefix}_tr {
      &:last-child {
        .#{$table-prefix}_td,
        .#{$table-prefix}_th {
          border-bottom: 0;
        }
      }
    }
  }

  &_table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    box-sizing: border-box;
  }

  &_header {
    @include reset-scroll(8px, 0);
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
  }

  &_body {
    @include reset-scroll();
    flex: 1;
    overflow: overlay;
  }

  &_tr,
  tr {
    box-sizing: border-box;
  }

  &_td,
  &_th,
  td,
  th {
    padding: $padding-md $padding-sm;
    text-align: left;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;

    &-fix-left {
      position: sticky;

      &-last {
        box-shadow: inset -10px 0 10px -10px $shadow-color;
      }
    }

    &-fix-right {
      position: sticky;

      &-first {
        box-shadow: inset 10px 0 10px -10px $shadow-color;
      }
    }

    &-align-center {
      text-align: center;
    }

    &-align-right {
      text-align: right;
    }
  }

  &_th,
  th {
    background: $table-th-bg;
  }

  &_td,
  td {
    background: $table-td-bg;
  }
}
